<template>
  <div>
    <page-header :content="'文档---'+xtInfo.gzyqVersion" title="返回" @back="$router.back()"></page-header>
    <div class="md-box" v-if="content">
      <vue-markdown v-highlight :source="content"></vue-markdown>
    </div>
  </div>
</template>

<script>
import PageHeader from "@/components/PageHeader";
import VueMarkdown from 'vue-markdown'
import commonMixins from "@/mixins/commonMixins";

export default {
  mixins: [commonMixins],
  components: {PageHeader, VueMarkdown},
  name: "Doc",
  data() {
    return {
      content: ""
    }
  },
  watch: {
    $route() {
      this.load()
    }
  },
  async mounted() {
    this.load()
  },
  methods: {
    async load() {
      this.content = ''
      let fileName = this.$route.query._ || "index.md"
      let res = await this.$api.indexMd({fileName})
      this.content = res
          .replace(/\(localhost\/#/g, "(" + location.origin + "/#")
          .replace(/latest/g, this.xtInfo.gzyqVersion)
    }
  }
}
</script>

<style scoped lang="scss">
.md-box {
  padding: 0 50px;
  line-height: 1.5;
  font-size: 16px;

  ::v-deep p {
    margin: 0;
    margin-bottom: 15px;
  }


  ::v-deep code {
    background-color: #f4f7f9;
    font-family: Consolas, serif;
  }

  ::v-deep blockquote {
    border-left: 2px solid #a0c1dd;
    //margin-inline-start: 40px;
    margin: 0;
    padding: 15px;
    background-color: #f4f7f9;

    pre {
      margin: 0;
    }

    code {
      background-color: #ecf1f5;
      padding: 5px 10px;
    }
  }
}
</style>
